<template>
	<div>
		<el-tabs type="border-card">
			<el-tab-pane label="消费者端资源配置">
				<el-form :model="pageData" :rules="rules" ref="pageData" label-width="100px" class="demo-pageData">
					<el-form-item label="首页标题" prop="title">
						<el-input class="indexname" v-model="pageData.title" type="text" maxlength="25"
							placeholder="请输入内容" show-word-limit></el-input>
					</el-form-item>
					<el-form-item label="广告位标签" prop="described">
						<el-input class="indexname" type="textarea" autosize v-model="pageData.described"
							placeholder="请输入活动描述" maxlength="25" show-word-limit></el-input>
					</el-form-item>
					<el-form-item class="logo" label="首页logo" prop="logo">
						<div class="flex-row">
							<el-upload class="avatar-uploader" :action="action" :headers="headers"
								:show-file-list="false" :on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload" :on-progress="handleProgress">
								<img v-if="pageData.logo" :src="pageData.logo" class="avatar" />
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<p class="tips">注:logo图片长宽比为158*40</p>
						</div>
					</el-form-item>
					<el-form-item class="skin" label="首页页面皮肤" prop="homeSkin">
						<div class="flex-row">
							<el-upload class="avatar-uploader" :action="action" :headers="headers"
								:show-file-list="false" :on-success="handleAvatarSuccess2"
								:before-upload="beforeAvatarUpload" :on-progress="handleProgress">
								<img v-if="pageData.homeSkin" :src="pageData.homeSkin" class="avatar" />
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<p class="tips">{{ pageData.homeSkin == null ? 0 : 1 }}/1</p>
						</div>
					</el-form-item>

					<el-progress v-if="videoFlag" type="circle" :percentage="videoUploadPercent" style="
                            margin-left: 40%;
                            margin-bottom: 15%;
                            position: fixed;
                            z-index: 999;
                        "></el-progress>

					<el-form-item class="skin" label="专卖店页面皮肤" prop="storeSkin">
						<div class="flex-row">
							<el-upload class="avatar-uploader" :action="action" :headers="headers"
								:show-file-list="false" :on-success="handleAvatarSuccess3"
								:before-upload="beforeAvatarUpload" :on-progress="handleProgress">
								<img v-if="pageData.storeSkin" :src="pageData.storeSkin" class="avatar" />
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<p class="tips">{{ pageData.storeSkin == null ? 0 : 1 }}/1</p>
						</div>
					</el-form-item>
					<el-form-item class="skin" label="我的页面皮肤" prop="mySkin">
						<div class="flex-row">
							<el-upload class="avatar-uploader" :action="action" :headers="headers"
								:show-file-list="false" :on-success="handleAvatarSuccess4"
								:before-upload="beforeAvatarUpload" :on-progress="handleProgress">
								<img v-if="pageData.mySkin" :src="pageData.mySkin" class="avatar" />
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<p class="tips">{{ pageData.mySkin == null ? 0 : 1 }}/1</p>
						</div>
					</el-form-item>
					<el-form-item class="wheelList" label="首页轮播图" prop="wheelList">
						<div class="list">
							<div class="item" v-for="(item, index) in pageData.wheelList" v-dragging="{
                  item: item,
                  list: pageData.wheelList,
                  group: 'wheelList'
                }" :key="index">
								<img @click="deleteLunBoItem(index)" class="close"
									src="../../assets/img/foodsMan/cancel.png" alt />
								<div>
									<el-upload class="avatar-uploader" :action="action" :headers="headers"
										:show-file-list="false" :on-success="
                      (res, file, fileList) => {
                        return uploadlunbo(res, file, fileList, index);
                      }
                    " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
										<img v-if="item.picUrl" :src="item.picUrl" class="avatar" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
									<p class="tips">注:图片尺寸比例为520*688</p>
								</div>

								<div class="content">
									<el-select v-model="item.skipType" size="mini" placeholder="请选择类型">
										<el-option v-for="item in routerTypeList" :key="item.value" :label="item.label"
											:value="item.value">
										</el-option>
									</el-select>
									<el-select size="mini" v-if="item.skipType==21" v-model="item.activityId"
										@change="changeactivityId(item)" placeholder="请选择预售活动" filterable clearable>
										<el-option v-for="item in activityIdList" :key="item.uuid" :value="item.uuid"
											:label="item.activityName"></el-option>
									</el-select>
									<el-select v-if="item.skipType == 1 || item.skipType == 4||item.skipType==21"
										v-model="item.goodsId" size="mini" placeholder="请选择商品"
										@change="changeGoodsId(item)" filterable clearable>
										<el-option v-for="item in goosList" :key="item.goodsId"
											:label="item.goodsName + '(单位：' + item.unitName + ')'"
											:value="item.goodsId"></el-option>
									</el-select>

									<el-select v-if="item.skipType == 11" v-model="item.goodsId" size="mini"
										placeholder="请选择兑换赠品" filterable clearable>
										<el-option v-for="item in pointConverList" :key="item.giftId"
											:label="item.activityName + '(：' + item.giftName + ')'"
											:value="item.giftId"></el-option>
									</el-select>

									<el-select v-if="item.skipType == 10" v-model="item.goodsId" size="mini"
										placeholder="请选择915活动商品" filterable clearable>
										<el-option v-for="item in goos915List" :key="item.goodsId"
											:label="item.goodsName + '(单位：' + item.unitName + ')'"
											:value="item.goodsId"></el-option>
									</el-select>

									<el-select v-if="item.skipType == 22" v-model="item.goodsId"
										@change="changeType(item, item.goodsId)" size="mini" placeholder="请选择商品分类"
										filterable clearable>
										<el-option v-for="(itemType, i) in typeData" :key="itemType.key"
											:label="itemType.goodsTypeName" :value="itemType.goodsTypeId"></el-option>
									</el-select>
									<el-switch v-model="item.value" active-text="H5路径" inactive-text="海报"
										@change="changeSwitch($event, item)" v-show="item.skipType != 5"></el-switch>
									<div class="flex-row" style="align-items: flex-end"
										v-show="item.skipType != 5 && !item.value">
										<el-upload class="avatar-uploader" :action="action" :headers="headers"
											:show-file-list="false" :on-success="
                        (res, file, fileList) => {
                          return uploadlunboHaibao(res, file, fileList, index);
                        }
                      " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
											<img v-if="item.posterUrl" :src="item.posterUrl" class="avatar"
												v-show="item.skipType != 5" />
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
										<p class="tips" v-if="!item.posterUrl" style="margin-left: 10px">注：请上传海报图(限30M)
										</p>
									</div>

									<el-input v-model="item.uri" size="mini" class="input_edit" placeholder="请输入路径"
										v-show="item.skipType != 5 && item.value"></el-input>
									<div v-show="item.skipType == 5">
										<el-button v-show="item.skipType == 5" type="text" size="mini"
											@click="addOrUpdateHandle(item.described, false)">编辑</el-button>
										<el-button v-show="item.skipType == 5" type="text" size="mini"
											@click="addOrUpdateHandle(item.described, true)">预览</el-button>
									</div>
									<p class="tips" style="margin-left: 10px" v-show="item.skipType != 5">注：海报或H5链接只能二选一
									</p>
								</div>
							</div>
							<div @click="addNewLunbo" class="add-item"><img src="../../assets/img/foodsMan/add.png"
									alt /></div>
						</div>
					</el-form-item>
					<el-form-item class="wheelList" label="首页广告位" prop="adList">
						<div class="list">
							<div class="item" v-for="(item, index) in pageData.adList" v-dragging="{
                  item: item,
                  list: pageData.adList,
                  group: 'adList'
                }" :key="index">
								<img @click="deleteAdListItem(index)" class="close"
									src="../../assets/img/foodsMan/cancel.png" alt />
								<div>
									<el-upload class="avatar-uploader" :action="action" :headers="headers"
										:show-file-list="false" :on-success="
                      (res, file, fileList) => {
                        return uploadAdList(res, file, fileList, index);
                      }
                    " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
										<img v-if="item.picUrl" :src="item.picUrl" class="avatar" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
									<p class="tips">注:图片尺寸比例为750*750</p>
								</div>

								<div class="content">
									<el-select v-model="item.skipType" size="mini" placeholder="请选择类型">
										<el-option v-for="item in routerTypeList" :key="item.value" :label="item.label"
											:value="item.value">
										</el-option>
									</el-select>
									<el-select v-if="item.skipType==21" size="mini" v-model="item.activityId"
										@change="changeactivityId(item)" placeholder="请选择预售活动" filterable clearable>
										<el-option v-for="item in activityIdList" :key="item.uuid" :value="item.uuid"
											:label="item.activityName"></el-option>
									</el-select>
									<el-select v-if="item.skipType == 1 || item.skipType == 4||item.skipType==21"
										v-model="item.goodsId" size="mini" placeholder="请选择商品"
										@change="changeGoodsId(item)" filterable clearable>
										<el-option v-for="item in goosList" :key="item.goodsId"
											:label="item.goodsName + '(单位：' + item.unitName + ')'"
											:value="item.goodsId"></el-option>
									</el-select>

									<el-select v-if="item.skipType == 11" v-model="item.goodsId" size="mini"
										placeholder="请选择兑换赠品" filterable clearable>
										<el-option v-for="item in pointConverList" :key="item.giftId"
											:label="item.activityName + '(：' + item.giftName + ')'"
											:value="item.giftId"></el-option>
									</el-select>

									<el-select v-if="item.skipType == 10" v-model="item.goodsId" size="mini"
										placeholder="请选择915活动商品" filterable clearable>
										<el-option v-for="item in goos915List" :key="item.goodsId"
											:label="item.goodsName + '(单位：' + item.unitName + ')'"
											:value="item.goodsId"></el-option>
									</el-select>

									<el-select v-if="item.skipType == 22" v-model="item.goodsId"
										@change="changeType(item, item.goodsId)" size="mini" placeholder="请选择商品分类"
										filterable clearable>
										<el-option v-for="(item, i) in typeData" :key="item.key"
											:label="item.goodsTypeName" :value="item.goodsTypeId"></el-option>
									</el-select>

									<el-select v-if="item.skipType == 3" v-model="item.goodsId" size="mini"
										placeholder="请选择奖品活动" filterable clearable>
										<el-option v-for="item in goosList" :key="item.goodsId"
											:label="item.goodsName + '(单位：' + item.unitName + ')'"
											:value="item.goodsId"></el-option>
									</el-select>

									<el-switch v-model="item.value" active-text="H5路径" inactive-text="海报"
										@change="changeSwitch($event, item)" v-show="item.skipType != 5"></el-switch>
									<div class="flex-row" style="align-items: flex-end"
										v-show="item.skipType != 5 && !item.value">
										<el-upload class="avatar-uploader" :action="action" :headers="headers"
											:show-file-list="false" :on-success="
                        (res, file, fileList) => {
                          return uploadAdListHaibao(res, file, fileList, index);
                        }
                      " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
											<img v-if="item.posterUrl" :src="item.posterUrl" class="avatar" />
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
										<p class="tips" style="margin-left: 10px">注：请上传海报图(限30M)</p>
									</div>
									<el-input v-model="item.uri" size="mini" class="input_edit" placeholder="请输入路径"
										v-show="item.skipType != 5 && item.value"></el-input>
									<div v-show="item.skipType == 5">
										<el-button v-show="item.skipType == 5" type="text" size="mini"
											@click="addOrUpdateHandle(item.described, false)">编辑</el-button>
										<el-button v-show="item.skipType == 5" type="text" size="mini"
											@click="addOrUpdateHandle(item.described, true)">预览</el-button>

										<div class="sub-title-wrapper">
											<div class="sub-title-wrapper__item">
												标题<el-input v-model="item.headline" size="mini" class="input_edit" placeholder="请输入标题"></el-input>
											</div>
											<div class="sub-title-wrapper__item">
												副标题<el-input v-model="item.subheading" size="mini" class="input_edit" placeholder="请输入副标题"></el-input>
											</div>
										</div>
									</div>
									<p class="tips" style="margin-left: 10px" v-show="item.skipType != 5">注：海报或H5链接只能二选一
									</p>
								</div>
							</div>
							<div @click="addNewAdList" class="add-item"><img src="../../assets/img/foodsMan/add.png"
									alt /></div>
						</div>
					</el-form-item>
					<el-form-item class="wheelList" label="商城广告位" prop="shopList">
						<div class="list">
							<div class="item" v-for="(item, index) in pageData.shopList" v-dragging="{
                  item: item,
                  list: pageData.shopList,
                  group: 'shopList1'
                }" :key="index">
								<img @click="deleteShopListItem(index)" class="close"
									src="../../assets/img/foodsMan/cancel.png" alt />
								<div>
									<el-upload class="avatar-uploader" :action="action" :headers="headers"
										:show-file-list="false" :on-success="
                      (res, file, fileList) => {
                        return uploadShopList(res, file, fileList, index);
                      }
                    " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
										<img v-if="item.picUrl" :src="item.picUrl" class="avatar" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
									<p class="tips">注:图片尺寸比例为330*230</p>
								</div>

								<div class="content">
									<el-select v-model="item.skipType" size="mini" placeholder="请选择类型">
										<el-option v-for="item in routerTypeList" :key="item.value" :label="item.label"
											:value="item.value">
										</el-option>
									</el-select>
									<el-select v-if="item.skipType==21" size="mini" v-model="item.activityId"
										@change="changeactivityId(item)" placeholder="请选择预售活动" filterable clearable>
										<el-option v-for="item in activityIdList" :key="item.uuid" :value="item.uuid"
											:label="item.activityName"></el-option>
									</el-select>
									<el-select v-if="item.skipType == 1 || item.skipType == 4||item.skipType==21"
										v-model="item.goodsId" size="mini" placeholder="请选择商品"
										@change="changeGoodsId(item)" filterable clearable>
										<el-option v-for="item in goosList" :key="item.goodsId"
											:label="item.goodsName + '(单位：' + item.unitName + ')'"
											:value="item.goodsId"></el-option>
									</el-select>
									<el-select v-if="item.skipType == 11" v-model="item.goodsId" size="mini"
										placeholder="请选择兑换赠品" filterable clearable>
										<el-option v-for="item in pointConverList" :key="item.giftId"
											:label="item.activityName + '(：' + item.giftName + ')'"
											:value="item.giftId"></el-option>
									</el-select>

									<el-select v-if="item.skipType == 10" v-model="item.goodsId" size="mini"
										placeholder="请选择915活动商品" filterable clearable>
										<el-option v-for="item in goos915List" :key="item.goodsId"
											:label="item.goodsName + '(单位：' + item.unitName + ')'"
											:value="item.goodsId"></el-option>
									</el-select>

									<el-select v-if="item.skipType == 22" v-model="item.goodsId"
										@change="changeType(item, item.goodsId)" size="mini" placeholder="请选择商品分类"
										filterable clearable>
										<el-option v-for="(item, i) in typeData" :key="item.key"
											:label="item.goodsTypeName" :value="item.goodsTypeId"></el-option>
									</el-select>

									<el-switch v-model="item.value" active-text="H5路径" inactive-text="海报"
										@change="changeSwitch($event, item)" v-show="item.skipType != 5"></el-switch>
									<div class="flex-row" style="align-items: flex-end"
										v-show="item.skipType != 5 && !item.value">
										<el-upload class="avatar-uploader" :action="action" :headers="headers"
											:show-file-list="false" :on-success="
                        (res, file, fileList) => {
                          return uploadShopListHaibao(res, file, fileList, index);
                        }
                      " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
											<img v-if="item.posterUrl" :src="item.posterUrl" class="avatar" />
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
										<p class="tips" style="margin-left: 10px">注：请上传海报图(限30M)</p>
									</div>
									<el-input v-model="item.uri" size="mini" class="input_edit" placeholder="请输入路径"
										v-show="item.skipType != 5 && item.value"></el-input>
									<div v-show="item.skipType == 5">
										<el-button v-show="item.skipType == 5" type="text" size="mini"
											@click="addOrUpdateHandle(item.described, false)">编辑</el-button>
										<el-button v-show="item.skipType == 5" type="text" size="mini"
											@click="addOrUpdateHandle(item.described, true)">预览</el-button>
									</div>
									<p class="tips" style="margin-left: 10px" v-show="item.skipType != 5">注：海报或H5链接只能二选一
									</p>
								</div>
							</div>
							<div @click="addNewShopList" class="add-item"><img src="../../assets/img/foodsMan/add.png"
									alt /></div>
						</div>
					</el-form-item>
					<el-form-item class="wheelList" label="分享配置" prop="shareList">
						<div class="list">
							<div class="item" v-for="(item, index) in pageData.shareList" v-dragging="{
                  item: item,
                  list: pageData.shareList,
                  group: 'shareList'
                }" :key="index">
								<img @click="deleteShareListItem(index)" class="close"
									src="../../assets/img/foodsMan/cancel.png" alt />
								<div>
									<el-upload class="avatar-uploader" :action="action" :headers="headers"
										:show-file-list="false" :on-success="
                      (res, file, fileList) => {
                        return uploadShareList(res, file, fileList, index);
                      }
                    " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
										<img v-if="item.picUrl" :src="item.picUrl" class="avatar" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
									<p class="tips">注:图片尺寸比例为330*230</p>
								</div>

								<div class="content">
									<el-select v-model="item.skipType" size="mini" placeholder="请选择类型">
										<el-option v-for="item in [
                        {
                          label: '抽奖活动分享',
                          value: 98
                        },
                        {
                          label: '首页分享图片',
                          value: 99
                        },
                        {
                          label: '专卖店分享图片',
                          value: 100
                        },
                        {
                          label: '定制酒商品',
                          value: 7
                        },
                        {
                          label: '品鉴酒兑换',
                          value: 8
                        },
                        {
                          label: '酒红包分享',
                          value: 9
                        }
                      ]" :key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
									<el-input v-model="item.uri" size="mini" class="input_edit" placeholder="请输入分享描述"
										maxlength="20" show-word-limit></el-input>
									<div class="flex-row" style="align-items: flex-end">
										<el-upload class="avatar-uploader" :action="action" :headers="headers"
											:show-file-list="false" :on-success="
                        (res, file, fileList) => {
                          return uploadShareListHaibao(res, file, fileList, index);
                        }
                      " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
											<img v-if="item.posterUrl" :src="item.posterUrl" class="avatar" />
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
										<p class="tips" style="margin-left: 10px">注：请上传海报图(限30M)</p>
									</div>
								</div>
							</div>
							<div @click="addNewShareList" class="add-item"><img src="../../assets/img/foodsMan/add.png"
									alt /></div>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('dataForm')">立即保存</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="商家端资源配置">
				<el-form :model="shopData" :rules="rules" ref="shopData" label-width="100px" class="demo-pageData">
					<el-form-item class="logo" label="登录首页图" prop="picUrl">
						<div class="flex-row">
							<el-upload class="avatar-uploader" :action="action" :headers="headers"
								:show-file-list="false" :on-success="handleShopSuccess"
								:before-upload="beforeAvatarUpload" :on-progress="handleProgress">
								<img v-if="shopData.picUrl" :src="shopData.picUrl" class="avatar" />
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<p class="tips">注:picture图片长宽比为158*40</p>
						</div>
					</el-form-item>

					<el-progress v-if="videoFlag" type="circle" :percentage="videoUploadPercent" style="
                            margin-left: 40%;
                            margin-bottom: 15%;
                            position: fixed;
                            z-index: 999;
                        "></el-progress>

					<el-form-item class="wheelList" label="首页轮播图" prop="shopList">
						<div class="list">
							<div class="item" v-for="(item, index) in shopData.shopList" v-dragging="{
                  item: item,
                  list: shopData.shopList,
                  group: 'shopList2'
                }" :key="index">
								<img @click="deleteShopDataItem(index)" class="close"
									src="../../assets/img/foodsMan/cancel.png" alt />
								<div>
									<el-upload class="avatar-uploader" :action="action" :headers="headers"
										:show-file-list="false" :on-success="
                      (res, file, fileList) => {
                        return uploadShopData(res, file, fileList, index);
                      }
                    " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
										<img v-if="item.picUrl" :src="item.picUrl" class="avatar" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
									<p class="tips">注:图片尺寸比例为750*552</p>
								</div>

								<div class="content">
									<el-switch v-model="item.value" active-text="H5路径" inactive-text="海报"
										@change="changeSwitch($event, item)"></el-switch>
									<div class="flex-row" style="align-items: flex-end" v-show="!item.value">
										<el-upload class="avatar-uploader" :action="action" :headers="headers"
											:show-file-list="false" :on-success="
                        (res, file, fileList) => {
                          return uploadShopDataHaibao(res, file, fileList, index);
                        }
                      " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
											<img v-if="item.posterUrl" :src="item.posterUrl" class="avatar" />
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
										<p class="tips" style="margin-left: 10px">注：请上传海报图(限30M)</p>
									</div>
									<el-input v-model="item.uri" size="mini" class="input_edit" placeholder="请输入路径"
										v-show="item.value">
									</el-input>
									<p class="tips" style="margin-left: 10px">注：海报或H5链接只能二选一</p>
								</div>
							</div>
							<div @click="addNewShopData" class="add-item"><img src="../../assets/img/foodsMan/add.png"
									alt /></div>
						</div>
					</el-form-item>

					<el-form-item class="wheelList" label="视频功能管理" prop="picShopList">
						<div class="listVideo">
							<div class="itemVideo" v-for="(item, index) in shopData.picShopList" v-dragging="{
                  item: item,
                  list: shopData.picShopList,
                  group: 'picShopList'
                }" :key="index">
								<img @click="deleteAdDataItem(index)" class="close"
									src="../../assets/img/foodsMan/cancel.png" alt />
								<div>
									<el-upload class="avatar-uploader" :action="action" :headers="headers"
										:show-file-list="false" :on-success="
                      (res, file, fileList) => {
                        return uploadPicShopList(res, file, fileList, index);
                      }
                    " :before-upload="beforeAvatarUploadVideo" :on-progress="handleProgress">
										<video controls v-if="item.picUrl" :src="item.picUrl" class="avatar"
											:style="styleObject" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
									<p class="tips">注:视频格式为MP4</p>
								</div>

								<div class="contentVideo">
									<el-input v-model="item.buttonName" size="mini" class="input_edit"
										placeholder="请输入配置名称"></el-input>
									<el-switch v-model="item.value" active-text="H5路径" inactive-text="海报"
										@change="changeSwitch($event, item)"></el-switch>
									<div class="flex-row" style="align-items: flex-end" v-show="!item.value">
										<el-upload class="avatar-uploader" :action="action" :headers="headers"
											:show-file-list="false" :on-success="
                        (res, file, fileList) => {
                          return uploadPicShopListHaibao(res, file, fileList, index);
                        }
                      " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
											<img v-if="item.posterUrl" :src="item.posterUrl" class="avatar" />
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
										<p class="tips" style="margin-left: 10px">注：请上传海报图(限30M)</p>
									</div>
									<el-input v-model="item.uri" size="mini" class="input_edit" placeholder="请输入路径"
										v-show="item.value">
									</el-input>
									<p class="tips" style="margin-left: 10px">注：海报或H5链接只能二选一</p>
								</div>
							</div>
							<div @click="addNewPicShopList" class="add-item"><img
									src="../../assets/img/foodsMan/add.png" alt /></div>
						</div>
					</el-form-item>
					<!-- <el-form-item
                        class="wheelList"
                        label="视频功能管理"
                        prop="picShopList"
                        style="display:inline"
                    >
                        <div class="list">
                            <div
                                class="item"
                                v-for="(item, index) in shopData.picShopList"
                                :key="index"
                            >
                                <img
                                    @click="deleteAdDataItem(index)"
                                    class="close"
                                    src="../../assets/img/foodsMan/cancel.png"
                                    alt
                                />
                                <div class="content">
                                    <el-input
                                        v-model="item.buttonName"
                                        size="mini"
                                        class="input_edit"
                                        placeholder="请输入配置名称"
                                    ></el-input>
                                    <el-input
                                        v-model="item.uri"
                                        size="mini"
                                        class="input_edit"
                                        placeholder="请输入路径"
                                    ></el-input>
                                    <div class="flex-row" style="align-items: flex-end;">
                                        <el-upload
                                            class="avatar-uploader"
                                            action="action"
                                            :headers="headers"
                                            :show-file-list="false"
                                            :on-success="
                  (res, file, fileList) => {
                    return uploadPicShopList(res, file, fileList, index);
                  }
                "
                                            :before-upload="beforeAvatarUpload"
                                        >
                                            <img
                                                v-if="item.picUrl"
                                                :src="item.picUrl"
                                                class="avatar"
                                            />
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                        <p class="tips">注:图片尺寸比例为330*230</p>
                    </div>-->

					<!-- <div class="content">
                                    <el-switch
                                        v-model="item.value"
                                        active-text="H5路径"
                                        inactive-text="海报"
                                        @change="changeSwitch($event,item)"
                                    ></el-switch>
                                    <div
                                        class="flex-row"
                                        style="align-items: flex-end;"
                                        v-show="!item.value"
                                    >
                                        <el-upload
                                            class="avatar-uploader"
                                            action="action"
                                            :headers="headers"
                                            :show-file-list="false"
                                            :on-success="
                    (res, file, fileList) => {
                      return uploadShopListHaibao(res, file, fileList, index);
                    }
                  "
                                            :before-upload="beforeAvatarUpload"
                                        >
                                            <img
                                                v-if="item.posterUrl"
                                                :src="item.posterUrl"
                                                class="avatar"
                                            />
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                        <p class="tips" style="margin-left: 10px;">注：请上传海报图(限30M)</p>
                                    </div>
                                    <el-input
                                        v-model="item.uri"
                                        size="mini"
                                        class="input_edit"
                                        placeholder="请输入路径"
                                        v-show="item.value"
                                    ></el-input>
                                    <p class="tips" style="margin-left: 10px;">注：海报或H5链接只能二选一</p>
                    </div>-->
					<!-- </div>
                            </div>
                            <div @click="addNewPicShopList" class="add-item">
                                <img src="../../assets/img/foodsMan/add.png" alt />
                            </div>
                        </div>
                    </el-form-item>-->
					<el-form-item class="wheelList" label="活动分享" prop="colorShareList">
						<div class="list">
							<div class="item" v-for="(item, index) in shopData.colorShareList" v-dragging="{
                  item: item,
                  list: shopData.colorShareList,
                  group: 'colorShareList'
                }" :key="index">
								<img @click="deleteColorShareListItem(item, index)" class="close"
									src="../../assets/img/foodsMan/cancel.png" alt />
								<div class="content">
									<!-- <i size="mini">名称</i> -->
									<el-input v-model="item.buttonName" size="mini" class="input_edit"
										placeholder="请输入活动名称"></el-input>
									<div class="flex-row" style="align-items: flex-end">
										<el-upload class="avatar-uploader" :action="action" :headers="headers"
											:show-file-list="false" :on-success="
                        (res, file, fileList) => {
                          return uploadColorShareList(res, file, fileList, index);
                        }
                      " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
											<img v-if="item.picUrl" :src="item.picUrl" class="avatar" />
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
										<p class="tips">注:图片尺寸比例为330*230</p>
									</div>
									<i size="mini">文字颜色</i>
									<colorPicker v-model="item.uri" defaultColor="#ff0000" class="color"></colorPicker>
								</div>
							</div>
							<div @click="addNewColorShareList" class="add-item"><img
									src="../../assets/img/foodsMan/add.png" alt />
							</div>
						</div>
					</el-form-item>

					<el-form-item class="wheelList" label="管理功能入口" prop="authorityData">
						<div class="list">
							<div class="item" v-for="(item, index) in authorityData" v-dragging="{
                  item: item,
                  list: authorityData,
                  group: 'authorityData'
                }" :key="index">
								<img @click="deleteauthorityDataItem(item, index)" class="close"
									src="../../assets/img/foodsMan/cancel.png" alt />
								<div class="content">
									<!-- <i size="mini">名称</i> -->
									<el-input v-model="item.authorityName" size="mini" class="input_edit"
										placeholder="请输入配置名称">
									</el-input>
									<!-- <span size="mini">路径</span> -->
									<el-input v-model="item.authorityUri" size="mini" class="input_edit"
										placeholder="请输入路径"></el-input>
									<div class="flex-row" style="align-items: flex-end">
										<el-upload class="avatar-uploader" :action="action" :headers="headers"
											:show-file-list="false" :on-success="
                        (res, file, fileList) => {
                          return uploadAuthorityList(res, file, fileList, index);
                        }
                      " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
											<img v-if="item.icon" :src="item.icon" class="avatar" />
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
										<p class="tips">注:图片尺寸比例为330*230</p>
									</div>
								</div>
							</div>
							<div @click="addNewAuthorityList" class="add-item"><img
									src="../../assets/img/foodsMan/add.png" alt />
							</div>
						</div>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="submitForm2('dataForm')">立即保存</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate"></add-or-update>
	</div>
</template>
<script>
	import AddOrUpdate from '@/page/basicinfoManagement/adseting-detail';
	import {
		queryStockGoods,
		queryGoodsCategorys
	} from '@/api/compositegoods';
	import {
		carouselConfiguration,
		queryPageConfigurationInfor,
		carouselShopConfiguration,
		queryShopConfigurationInfor,
		queryAuthority,
		addAppletAuthority,
		updateAppletAuthority,
		deleteAppletAuthority,
		qryActivityConfig,
		editPromotionDeciduousIndexWindow,
		qryBonuspointConverInfo
	} from '@/api/adSetting';
	import {
		queryPreSaleActList
	} from "@/api/preSaleActivity";
	import qs from 'qs';



	export default {
		data() {
			return {
				action: `${process.env.VUE_APP_BASE_API}/api/file-service/v1/file/uploadFile`,
				styleObject: {
					width: '320px',
					'line-height': '180px',
					height: '180px'
				},
				headers: {},
				addOrUpdateVisible: false,
				pointConverList: [],
				goosList: [],
				goos915List: [],
				activityList: [],
				activityIdList: [],
				typeData: [],
				pageData: {
					title: '', //头部文案
					described: '',
					logo: '', //logo
					wheelList: [], //轮播图
					shopList: [], //商城轮播图
					adList: [], //广告位
					shareList: [] //分享配置
				},
				shopData: {
					picUrl: '', //商家端picUrl
					shopList: [], //商城轮播图
					picShopList: [], //广告位
					colorShareList: [] //活动分享
				},
				lunboItem: {
					urlType: 1,
					uri: '',
					described: '',
					picUrloud: '',
					showNo: 0,
					skipType: '',
					posterUrl: '',
					goodsId: '',
					buttonName: '',
					value: true,
					isRelatedActivity: 1
				},
				authorityForm: {
					uuid: '',
					authorityName: '',
					authorityUri: '',
					isShow: '',
					icon: '',
					desc: '',
					status: 1,
					sort: 0
				},
				authorityData: [],
				rules: {},
				videoFlag: false,
				videoUploadPercent: 0,
				routerTypeList: [{
						label: '商品海报',
						value: 1
					},
					{
						label: '商品分类',
						value: 22
					},
					{
						label: '活动宣传',
						value: 2
					},
					{
						label: '奖品活动',
						value: 3
					},
					{
						label: '商品直购',
						value: 4
					},
					{
						label: '落地页配置',
						value: 5
					},
					{
						label: '分享有礼',
						value: 6
					},
					{
						label: '定制酒商品',
						value: 7
					},
					{
						label: '品鉴酒兑换',
						value: 8
					},
					{
						label: '酒红包专区',
						value: 9
					},
					{
						label: '915活动',
						value: 10
					},

					{
						label: '春节活动',
						value: 18
					},
					{
						label: '直播活动',
						value: 19
					},
					{
						label: '购酒券活动',
						value: 20
					},
					{
						label: '预售活动',
						value: 21
					},
					{
						label: '满赠抽奖',
						value: 23
					},
					{
						label: '现金券抽奖',
						value: 24
					}
				]
			};
		},
		components: {
			AddOrUpdate
		},
		created() {
			this.headers = {
				token: localStorage.token || ''
			};
		},
		mounted() {
			this.getProductType();
			this.qryBonuspointConverInfo();
			this.getUserWhiteList();
			this.queryPreSaleActList();
			this.getUserWhiteList2();
			this.queryPageConfigurationInfor();
			this.queryShopConfigurationInfor();
			this.queryAuthority();
			// this.qryActivityConfig();
			this.$dragging.$on('dragged', ({
				value
			}) => {
				console.log(value.item, 'dragged1');
				console.log(value.list, 'dragged2');
				console.log(value.group, 'dragged3');
			});
		},
		methods: {
			addOrUpdateHandle(id, flag) {
				this.addOrUpdateVisible = true;
				this.$nextTick(() => {
					this.$refs.addOrUpdate.init(id, flag);
				});
			},
			qryBonuspointConverInfo() {
				let data = {
					size: 99999,
					current: 1,
					condition: {},
					ascs: [],
					descs: []
				};
				qryBonuspointConverInfo(data).then(res => {
					this.pointConverList = res.result;
				});
			},
			queryPreSaleActList() {
				let data = {
					size: 10,
					current: "1",
					condition: {},
					ascs: [],
					descs: []
				};
				queryPreSaleActList(data).then(res => {
					this.activityIdList = res.records;
					if (res.records.length == 0) {

					} else {
						(this.formInline.activityId = this.activityIdList[0].uuid),
						this.queryPresaleOrderList();
					}

				});
			},
			getUserWhiteList() {
				let data = {
					size: 99999,
					current: 1,
					condition: {
						isMinUnit: 1,
						status: 1,
						goodsStyle: ''
					},
					ascs: [],
					descs: []
				};
				queryStockGoods(data).then(res => {
					this.goosList = res.records;
				});
			},
			getUserWhiteList2() {
				let data = {
					size: 99999,
					current: 1,
					condition: {
						isMinUnit: 1,
						status: 1,
						goodsStyle: 3
					},
					ascs: [],
					descs: []
				};
				queryStockGoods(data).then(res => {
					this.goos915List = res.records;
				});
			},
			qryActivityConfig() {
				let data = {
					size: 99999,
					current: 1,
					condition: {
						status: 1
					},
					ascs: [],
					descs: []
				};
				qryActivityConfig(data).then(res => {
					this.activityList = res.records;
				});
			},

			queryPageConfigurationInfor() {
				let data = {};
				queryPageConfigurationInfor(data).then(res => {
					if (res.code == 1) {
						res.result.wheelList.forEach((item, i) => {
							item.value = item.posterUrl == null || item.posterUrl == '' ? true : false;
							item.isRelatedActivity = item.isRelatedActivity != undefined ? item
								.isRelatedActivity : 1;
						});
						res.result.shopList.forEach((item, i) => {
							item.value = item.posterUrl == null || item.posterUrl == '' ? true : false;
							item.isRelatedActivity = item.isRelatedActivity != undefined ? item
								.isRelatedActivity : 1;
						});
						res.result.adList.forEach((item, i) => {
							item.value = item.posterUrl == null || item.posterUrl == '' ? true : false;
							item.isRelatedActivity = item.isRelatedActivity != undefined ? item
								.isRelatedActivity : 1;
						});
					}
					this.pageData = res.result;
					// this.pageData.wheelList = res.result.wheelList.sort((a,b)=>a.showNo<b.showNo?-1:(a.showNo<b.showNo)?1:0); //轮播图
					// this.pageData.shopList.sort(this.sortKey('showNo')); //商城轮播图
					// this.pageData.adList = res.result.adList.sort((a,b)=>a.showNo<b.showNo?-1:(a.showNo<b.showNo)?1:0); //广告位
					// this.pageData.shareList = res.result.shareList.sort((a,b)=>a.showNo<b.showNo?-1:(a.showNo<b.showNo)?1:0);//分享配置
					// this.$set(this.pageData,'shareList',[])
					// this.pageData= Object.assign({}, this.pageData, { 'shareList': [] })
				});
			},
			sortKey(key) {
				return function(a, b) {
					let x = a[key];
					let y = b[key];
					return x < y ? -1 : x > y ? 1 : 0;
				};
			},
			//上传视频大小限制
			beforeAvatarUploadVideo(file) {
				let flag = true;
				const filtType = file.type;
				const isLt30M = file.size / 1024 / 1024 < 100;
				console.log(filtType);
				if (filtType != 'video/*' && filtType != 'video/mp4') {
					this.$message.error('上传视频只能是 mp4 格式!');
					flag = false;
				}
				// if (!isLt30M) {
				//   this.$message.error("上传视频大小不能超过 100MB!");
				//   flag = false;
				// }
				return flag;
			},
			//上传尺寸限制
			beforeAvatarUpload(file) {
				let flag = true;
				const filtType = file.type;
				const isLt30M = file.size / 1024 / 1024 / 10 < 3;
				console.log(filtType);
				if (filtType != 'image/jpeg' && filtType != 'image/png' && filtType != 'image/jpg' && filtType !=
					'image/gif') {
					this.$message.error('上传图片只能是 JPEG JPG、PNG GIF格式!');
					flag = false;
				}
				if (!isLt30M) {
					this.$message.error('上传图片大小不能超过 30M!');
					flag = false;
				}
				return flag;
			},
			//logo选择
			handleAvatarSuccess(res, file) {
				this.pageData.logo = res.result;
				this.videoFlag = false;
			},
			handleAvatarSuccess2(res, file) {
				this.pageData.homeSkin = res.result;
				this.videoFlag = false;
			},
			handleAvatarSuccess3(res, file) {
				this.pageData.storeSkin = res.result;
				this.videoFlag = false;
			},
			handleAvatarSuccess4(res, file) {
				this.pageData.mySkin = res.result;
				this.videoFlag = false;
			},
			deleteLouDiye(index) {
				let data = {
					status: 0,
					type: index
				};
				editPromotionDeciduousIndexWindow(data).then(res => {});
			},
			deleteLunBoItem(index) {
				//删除轮播图;
				this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.pageData.wheelList.splice(index, 1);
						this.deleteLouDiye(index);
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			//用于生成uuid
			S4() {
				return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
			},
			// guid() { return (this.S4()+this.S4()+"-"+this.S4()+"-"+this.S4()+"-"+this.S4()+"-"+this.S4()+this.S4()+this.S4());},
			guid() {
				const now = new Date();
				let month = now.getMonth() + 1;
				let day = now.getDate();
				let hour = now.getHours();
				let minutes = now.getMinutes();
				let seconds = now.getSeconds();
				month = this.setTimeDateFmt(month);
				hour = this.setTimeDateFmt(hour);
				minutes = this.setTimeDateFmt(minutes);
				seconds = this.setTimeDateFmt(seconds);
				return month.toString() + day + hour + minutes + seconds;
			},
			setTimeDateFmt(n) {
				n = n.toString();
				return n[1] ? n : '0' + n;
			},
			//新增轮播图
			addNewLunbo() {
				let lunboItem = Object.assign({}, this.lunboItem, {
					described: this.guid()
				});
				this.pageData.wheelList.push(lunboItem);
			},
			uploadlunbo(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.pageData.wheelList));
				array[index].picUrl = res.result;
				this.videoFlag = false;
				this.pageData.wheelList = JSON.parse(JSON.stringify(array));
			},
			uploadlunboHaibao(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.pageData.wheelList));
				array[index].posterUrl = res.result;
				this.videoFlag = false;
				this.pageData.wheelList = JSON.parse(JSON.stringify(array));
			},
			deleteAdListItem(index) {
				//删除广告位;
				this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.pageData.adList.splice(index, 1);
						this.deleteLouDiye('100' + index);
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},

			//新增广告位
			addNewAdList() {
				let lunboItem = Object.assign({}, this.lunboItem, {
					described: this.guid()
				});
				this.pageData.adList.push(lunboItem);
			},

			uploadAdList(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.pageData.adList));
				array[index].picUrl = res.result;
				this.videoFlag = false;
				this.pageData.adList = JSON.parse(JSON.stringify(array));
			},

			uploadAdListHaibao(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.pageData.adList));
				array[index].posterUrl = res.result;
				this.videoFlag = false;
				this.pageData.adList = JSON.parse(JSON.stringify(array));
			},
			deleteShareListItem(index) {
				//删除分享配置;
				this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.pageData.shareList.splice(index, 1);
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			//新增分享配置
			addNewShareList() {
				this.pageData.shareList.push(this.lunboItem);
			},

			uploadShareList(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.pageData.shareList));
				array[index].picUrl = res.result;
				this.videoFlag = false;
				this.pageData.shareList = JSON.parse(JSON.stringify(array));
			},
			uploadShareListHaibao(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.pageData.shareList));
				array[index].posterUrl = res.result;
				this.videoFlag = false;
				this.pageData.shareList = JSON.parse(JSON.stringify(array));
			},

			deleteShopListItem(index) {
				//删除商城轮播;
				this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.pageData.shopList.splice(index, 1);
						this.deleteLouDiye('200' + index);
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},

			//新增商城轮播
			addNewShopList() {
				let lunboItem = Object.assign({}, this.lunboItem, {
					described: this.guid()
				});
				this.pageData.shopList.push(lunboItem);
			},

			uploadShopList(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.pageData.shopList));
				array[index].picUrl = res.result;
				this.videoFlag = false;
				this.pageData.shopList = JSON.parse(JSON.stringify(array));
			},

			uploadShopListHaibao(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.pageData.shopList));
				array[index].posterUrl = res.result;
				this.videoFlag = false;
				this.pageData.shopList = JSON.parse(JSON.stringify(array));
			},

			submitForm() {
				this.$refs['pageData'].validate(valid => {
					if (valid) {
						// alert("submit!");
						var userId = localStorage.getItem('userId');

						this.pageData.wheelList.forEach((item, i) => {
							item.showNo = i;
						});
						this.pageData.shopList.forEach((item, i) => {
							item.showNo = '200' + i;
						});
						this.pageData.adList.forEach((item, i) => {
							item.showNo = '100' + i;
						});
						this.pageData.shareList.forEach((item, i) => {
							item.showNo = i;
						});

						let data = {
							title: this.pageData.title,
							described: this.pageData.described,
							logo: this.pageData.logo,
							homeSkin: this.pageData.homeSkin,
							storeSkin: this.pageData.storeSkin,
							mySkin: this.pageData.mySkin,
							wheelList: this.pageData.wheelList,
							shopList: this.pageData.shopList,
							adList: this.pageData.adList,
							shareList: this.pageData.shareList
						};
						carouselConfiguration(data).then(res => {
							this.$message({
								showClose: true,
								message: '操作成功',
								type: 'success'
							});
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			queryShopConfigurationInfor() {
				let data = {};
				queryShopConfigurationInfor(data).then(res => {
					if (res.code == 1) {
						res.result.shopList.forEach((item, i) => {
							item.value = item.posterUrl == null || item.posterUrl == '' ? true : false;
						});
						res.result.picShopList.forEach((item, i) => {
							item.value = item.posterUrl == null || item.posterUrl == '' ? true : false;
						});
					}
					this.shopData = res.result;
					this.shopData.shopList.sort((a, b) => (a.showNo < b.showNo ? -1 : a.showNo < b.showNo ? 1 :
						0));
					this.shopData.picShopList.sort((a, b) => (a.showNo < b.showNo ? -1 : a.showNo < b.showNo ? 1 :
						0));
					// this.$set(this.shopData,'colorShareList',[]);
				});
			},
			//商家picUrl选择
			handleShopSuccess(res, file) {
				this.shopData.picUrl = res.result;
				this.videoFlag = false;
			},
			//新增广告位
			addNewPicShopList() {
				let lunboItem = this.lunboItem;
				lunboItem.urlType = 2;
				this.shopData.picShopList.push(lunboItem);
			},
			uploadPicShopList(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.shopData.picShopList));
				array[index].picUrl = res.result;
				this.videoFlag = false;
				this.shopData.picShopList = JSON.parse(JSON.stringify(array));
			},
			uploadPicShopListHaibao(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.shopData.picShopList));
				array[index].posterUrl = res.result;
				this.videoFlag = false;
				this.shopData.picShopList = JSON.parse(JSON.stringify(array));
			},
			//新增商城轮播
			addNewShopData() {
				this.shopData.shopList.push(this.lunboItem);
			},
			deleteAdDataItem(index) {
				//删除广告位;
				this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.shopData.picShopList.splice(index, 1);
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			deleteShopDataItem(index) {
				//删除商家商城轮播;
				this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.shopData.shopList.splice(index, 1);
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			uploadShopData(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.shopData.shopList));
				array[index].picUrl = res.result;
				this.videoFlag = false;
				this.shopData.shopList = JSON.parse(JSON.stringify(array));
			},
			uploadShopDataHaibao(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.shopData.shopList));
				array[index].posterUrl = res.result;
				this.videoFlag = false;
				this.shopData.shopList = JSON.parse(JSON.stringify(array));
			},
			submitForm2() {
				this.$refs['shopData'].validate(valid => {
					if (valid) {
						//   alert("submit!");
						var userId = localStorage.getItem('userId');

						this.shopData.shopList.forEach((item, i) => {
							item.showNo = i;
						});
						this.shopData.picShopList.forEach((item, i) => {
							item.showNo = i;
						});
						this.shopData.colorShareList.forEach((item, i) => {
							item.showNo = i;
						});

						let data = {
							picUrl: this.shopData.picUrl,
							shopList: this.shopData.shopList,
							picShopList: this.shopData.picShopList,
							colorShareList: this.shopData.colorShareList
						};
						carouselShopConfiguration(data).then(res => {
							this.$message({
								showClose: true,
								message: '操作成功',
								type: 'success'
							});
						});

						this.authorityData.forEach((item, i) => {
							item.sort = i;
							let data = item;
							if (item.uuid == null || item.uuid == '') {
								addAppletAuthority(data).then(res => {});
							}
							if (item.uuid != null && item.uuid != '') {
								updateAppletAuthority(data).then(res => {});
							}
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			queryAuthority() {
				let data = {};
				queryAuthority(data).then(res => {
					this.authorityData = res.records;
					this.authorityData.sort((a, b) => (a.sort < b.sort ? -1 : a.sort < b.sort ? 1 : 0));
				});
			},
			deleteauthorityDataItem(item, index) {
				//删除广告位;
				this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.authorityData.splice(index, 1);
						if (item.uuid !== '') {
							var data = item.uuid;
							deleteAppletAuthority(data).then(res => {
								this.$message({
									type: 'info',
									message: '删除成功!'
								});
							});
						} else {
							this.$message({
								type: 'info',
								message: '删除成功!'
							});
						}
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			uploadAuthorityList(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.authorityData));
				array[index].icon = res.result;
				this.videoFlag = false;
				this.authorityData = JSON.parse(JSON.stringify(array));
			},
			addNewAuthorityList() {
				this.authorityData.push(this.authorityForm);
			},
			changeSwitch(val, item) {
				item.uri = '';
				item.posterUrl = '';
			},
			handleChange(val) {
				console.log(val);
			},
			deleteColorShareListItem(item, index) {
				//删除商家活动分享;
				this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.shopData.colorShareList.splice(index, 1);
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			uploadColorShareList(res, file, fileList, index) {
				let array = JSON.parse(JSON.stringify(this.shopData.colorShareList));
				array[index].picUrl = res.result;
				this.videoFlag = false;
				this.shopData.colorShareList = JSON.parse(JSON.stringify(array));
			},
			//新增商城轮播
			addNewColorShareList() {
				this.shopData.colorShareList.push(this.lunboItem);
			},
			//编辑
			editDetail(v, index) {
				// this.submitForm();
				this.$router.push({
					name: 'adsetingDetail',
					params: {
						edit: v,
						flag: false,
						index: index
					}
				});
			},
			//预览
			showDetail(v, index) {
				this.$router.push({
					name: 'adsetingDetail',
					params: {
						edit: v,
						flag: true,
						index: index
					}
				});
			},

			//获取商品分类列表
			getProductType(v) {
				let data = {};
				queryGoodsCategorys(data).then(res => {
					this.typeData = res.records;
					this.typeData.unshift({
						goodsTypeId: '',
						goodsTypeName: '全部'
					});
				});
			},
			changeType(it, val) {
				this.typeData.find(item => {
					if (item.goodsTypeId === val) {
						//筛选出匹配数据
						it.isRelatedActivity = item.isRelatedActivity;
					}
				});
			},

			changeGoodsId(item) {
				let goodsId = item.goodsId;
				var array = this.goosList;
				for (let index = 0; index < array.length; index++) {
					const element = array[index].goodsId;
					if (element == goodsId) {
						item.urlType = array[index].goodsStyle;
					}
				}
			},
			changeactivityId(item) {
				let activityId = item.uuid;
				var array = this.activityIdList;
				for (let index = 0; index < array.length; index++) {
					const element = array[index].uuid;
					if (element == activityId) {
						item.activityId = array[index].uuid;
					}
				}
			},

			/**     文件正在上传时的钩子    **/
			handleProgress(event, file, fileList) {
				this.videoFlag = true;
				this.videoUploadPercent = Number(file.percentage.toFixed(0));
				console.log(this.videoUploadPercent);
			}
		}
	};
</script>
<style lang="less" scoped>
	.indexname {
		width: 25%;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo .avatar-uploader {
		width: 158px;
		height: 40px;
	}

	.logo .avatar-uploader .avatar {
		width: 158px;
		height: 40px;
	}

	/deep/ .logo .avatar-uploader .el-upload {
		width: 158px;
		height: 40px;
		position: relative;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
	}

	/deep/ .logo .el-form-item__content {
		margin-left: 0 !important;
	}

	/deep/ .logo p {
		color: #999999;
		margin-left: 20px;
	}

	.skin {
		display: flex;
		align-items: center;
	}

	.skin .avatar-uploader {
		width: 158px;
		height: 120px;
	}

	.skin .avatar-uploader .avatar {
		width: 158px;
		height: 120px;
	}

	/deep/ .skin .avatar-uploader .el-upload {
		width: 158px;
		height: 120px;
		position: relative;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
	}

	/deep/ .skin .el-form-item__content {
		margin-left: 0 !important;
	}

	/deep/ .skin p {
		color: #999999;
		margin-left: 20px;
	}

	.flex-row {
		display: flex;
		align-items: center;
	}

	.wheelList .list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.wheelList .item {
		width: 840px;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
		display: flex;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
		background: #ffffff;
		position: relative;
		margin: 10px;
	}

	.wheelList .item .avatar-uploader {
		width: 120px;
		height: 120px;
	}

	.wheelList .item .avatar-uploader .avatar {
		width: 120px;
		height: 120px;
	}

	/deep/ .wheelList .item .el-upload {
		width: 120px;
		height: 120px;
		position: relative;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
	}

	.wheelList .item .content {
		margin-left: 20px;
	}

	.wheelList .item .content .avatar-uploader {
		width: 80px;
		height: 80px;
		margin-bottom: 10px;
	}

	.wheelList .item .content .avatar-uploader .avatar {
		width: 80px;
		height: 80px;
		margin-bottom: 10px;
	}

	/deep/ .wheelList .item .content .el-upload {
		width: 80px;
		height: 80px;
		position: relative;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
	}

	/deep/ .wheelList .item .content .el-input--mini .el-input__inner {
		margin-bottom: 10px !important;
	}

	/deep/ .wheelList .item .content .el-switch {
		margin-bottom: 10px !important;
	}

	.wheelList .listVideo {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.wheelList .itemVideo {
		width: 840px;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
		display: flex;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
		background: #ffffff;
		position: relative;
		margin: 10px;
	}

	.wheelList .itemVideo .avatar-uploader {
		width: 320px;
		height: 180px;
	}

	.wheelList .itemVideo .avatar-uploader .avatar {
		width: 320px;
		height: 180px;
	}

	/deep/ .wheelList .itemVideo .el-upload {
		width: 320px;
		height: 180px;
		position: relative;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
	}

	/deep/ .wheelList .itemVideo .contentVideo .el-input--mini .el-input__inner {
		margin-bottom: 10px !important;
	}

	/deep/ .wheelList .itemVideo .contentVideo .el-switch {
		margin-bottom: 10px !important;
	}

	.wheelList .itemVideo .contentVideo {
		margin-left: 20px;
	}

	.wheelList .itemVideo .contentVideo .avatar-uploader {
		width: 80px;
		height: 80px;
	}

	.wheelList .itemVideo .contentVideo .avatar-uploader .avatar {
		width: 80px;
		height: 80px;
	}

	/deep/ .wheelList .itemVideo .contentVideo .el-upload {
		width: 80px;
		height: 80px;
		position: relative;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
	}

	.avatar-uploader-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.add-item {
		width: 100px;
		height: 100px;
		border-radius: 5px;
		border: 1px solid #f2f2f2;
		position: relative;
		background: #ffffff;
		margin-left: 20px;
	}

	.add-item img {
		width: 35px;
		height: 35px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 11;
	}

	.tips {
		width: max-content;
		font-size: 12px;
		line-height: normal;
		color: #999999;
		margin-top: 5px;
	}

	.close {
		width: 30px;
		height: 30px;
		padding: 10px;
		box-sizing: border-box;
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 11;
	}

	.color {
		z-index: 9;
	}
</style>
<style lang="scss" scoped>
.sub-title-wrapper {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	&__item {
		display: flex;
		align-items: center;
		gap: 5px;
		white-space: nowrap;
	}
}
</style>